<template>
    <div class="reachge_box" id="reachge">
        <div class="public_box">
            <div class="public">
                <div class="lable">运营商：</div>
                <el-select v-model="optionValue1" :class="{'grey':optionValue1 == ''}" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="public">
                <div class="lable">供货状态：</div>
                <el-select v-model="optionValue2" :class="{'grey':optionValue2 == ''}" placeholder="请选择">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="public public2">
                <div class="lable">供货时间：</div>
                <el-date-picker v-model="value1" :class="{'grey':value1 == ''}" type="datetime" placeholder="选择起始时间"></el-date-picker>
                <div class="div">--</div> 
                <el-date-picker v-model="value2" :class="{'grey':value2 == ''}"type="datetime" placeholder="选择结束时间"></el-date-picker>
            </div>
        </div>
        <div class="public_box otherCard">
            <div class="public pici">
                <div class="lable">SUP订单号：</div>
                <el-input placeholder="请输入批次号" v-model="input1" :class="{'grey':input1 == ''}" class="piciNum"></el-input>
            </div>
            <div class="public">
                <el-button>查询</el-button>
            </div>
        </div>
        <div class="table"></div>
        <div v-show="show" class="pagination">
            <Pagination @pageChange="pageNum" :paginationData='paginationData'></Pagination>
        </div>
    </div>
</template>
<script>
    import Pagination from '../../../../modules/Pagination/Pagination';
    export default {
        components:{
            Pagination
        },
		data() {
            return {
                paginationData: {
                    pageSize: 5,
                    totalNum: 2000,
                    activePage: 1
                },
                nowPage: 0,
                input1:'',                   // 单号
                value1:'',                   // 供货时间，起始时间
                value2:'',                   // 供货时间，终止时间
                show: true,                  // 是否显示没有表格数据的状态
                total: 100,                  // 表格的总条数
                optionValue1:'',             // 运营商
                optionValue2:'',             // 供货状态
                options1: [
                    {value: '1',label: '全国'}, 
                    {value: '2',label: '北京'}, 
                    {value: '3',label: '上海'}, 
                    {value: '4',label: '浙江'}, 
                    {value: '5',label: '广州'}
                ],
                options2: [
                    {value: '1',label: '50'}, 
                    {value: '2',label: '200'}, 
                    {value: '3',label: '500'}, 
                    {value: '4',label: '1000'}, 
                    {value: '5',label: '5000'}
                ],
                items:[],
                currentPage: 1,
            }
        },
        watch: {
            nowPage(){            // 监听当前页的变化，如果有变化开始请求当前页的数据
                console.log(this.nowPage);
            }
        },
        methods:{
            pageNum(val){
                this.nowPage = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            daochu(){
                this.$message({
                    message: '导出成功',
                    type: 'success',
                    center: true
                });
            }
        }
    }
</script>
<style scoped>
    .reachge_box{
        height: 422px;
    }
    .reachge_box .public_box{
        display: flex;
        font-size: 0;
        justify-content: space-between;
    }
    .public_box .public{
        display: flex;
        padding-top: 20px;
    }
    .public .lable{
        width: 86px;
        line-height: 32px;
        font-size: 14px;
        color: #494949;
    }
    .public:nth-child(5) .lable{
        width: 45px;
    }
    .public2 .div{
        width: 22px;
        font-size: 14px;
        font-weight: 400;
        line-height: 32px;
        text-align: center;
    }
    .pici .lable{
        width: 86px;
    }
    .el-button.el-button--default{
        width: 80px;
        height: 32px;
        padding: 0;
    }
    .el-button.el-button--default:nth-child(1){
        background-color: #8a6ad4;
        color: white;
        border-color: #8a6ad4;
        margin-left: 44px;
    }
    .table{
        width: 906px;
        height: 240px;
        margin-top: 20px;
        background-color: #fafafa;
    }
    .pagination{
        padding-top: 11px;
        text-align: right;
    }
    #noData_div{
        width: 100%;
        padding-top: 40px; 
    }
    #noData_div span{
        vertical-align: top;
        line-height: 81px;
        padding-left: 10px;
    }
    .reachge_box .otherCard{
    	display: flex;
    	justify-content: flex-start;
    }
</style>
